<template>
  <div class="disLibraryList padding_20">
    <el-input v-model="param.searchCondition"
              placeholder="请输入名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <Table :columns="tableCol"
           :data="tableData"
           stripe
           border
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="handleEdit(row)">编辑</span>
        <span @click="handleDel(row)">删除</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <disLibraryEdit ref="disLibraryEdit"
                    @getList="_getList"></disLibraryEdit>
    <Modal width="600px"
           v-model="imageModal"
           class-name="vertical-center-modal">
      <img :src="imageUrl"
           width="570px"
           height="570px" />
    </Modal>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import DisLibraryEdit from './disLibraryEdit'
  import { mapGetters } from 'vuex'
  export default {
    name: "disLibraryList",
    data () {
      return {
        imageModal: false,
        imageUrl: null,
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '图标',
            key: 'imageUrl',
            width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.imageUrl
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    'border-radius': '50%'
                  },
                  on: {
                    click: (event) => {
                      this.showBigImage(params.row.imageUrl);
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '最后修改时间',
            key: 'name',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.lastUpdateTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '介绍',
            key: 'introduceUrl'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        param: {
          searchCondition: ''
        }
      }
    },
    created () {
      this._getList();
    },
    methods: {
      handleQuery (){
        this.page.pageIndex=0
        this._getList()
      },
      showBigImage (url) {
        this.imageUrl = url;
        this.imageModal = true;
      },
      handleAdd () {
        this.$refs.disLibraryEdit.openView();
      },
      handleEdit (row) {
        // 父组件调用子组件方法
        this.$refs.disLibraryEdit.openView(Object.assign({}, row));
      },
      handleDel (row) {
        this.$confirm('您确认删除该信息？')
          .then(_ => {
            this.post(this.api.disLibraryDel.url, { id: row.id }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('删除成功！');
                this._getList();
              }
            })
          })
          .catch(_ => { });
      },
      _getList () {
        this.post(this.api.disLibraryList.url, {
          ...this.page,
          ...this.param
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      DisLibraryEdit
    }
  }
</script>

<style scoped lang="scss" >
</style>
